<template>
  <div class="page-container fixed-bottom">
    <Steps :step="step" :step-list="stepList" />
    <el-card class="detail-item">
      <el-statistic format="DD天HH小时mm分钟ss秒" :value="deadline" time-indices title="距离活动开始还有：" />
      <p class="p1">秒杀活动名称：</p>
      <p class="p1">是否连续：</p>
      <p class="p1">秒杀批次开始时间：</p>
      <p class="p1">秒杀批次结束时间：</p>
      <p class="p1">秒杀活动时间：</p>
      <p class="p1">活动规则：</p>
      <p class="p1">活动状态：</p>
    </el-card>
    <el-card class="detail-item">
      <div class="product-detail">
        <div class="product-left">
          <img width="160" src="http://gathergreat.cn:9000/ykt/商家中心.png">
        </div>
        <div class="product-middle">
          <p class="p2">金华火腿</p>
          <p class="p1">店铺名称：1111</p>
          <p class="p1">限购（0为不限购）：55</p>
          <p class="p1">秒杀库存：44</p>
        </div>
        <div class="product-right">
          <p class="p1">价格：1111</p>
          <p class="p1">秒杀价格：55</p>
        </div>
      </div>
    </el-card>
    <el-card class="detail-item">
      <div slot="header" class="product-header">
        <span>已报名产品数：11</span>
        <el-button type="primary" @click="addHandle">添加产品</el-button>
      </div>
      <el-table border :data="productList">
        <el-table-column label="产品名称" />
        <el-table-column label="产品图片" />
        <el-table-column label="产品规格" />
        <el-table-column label="规格单位" />
        <el-table-column label="价格（元）" />
        <el-table-column label="限购（0为不限购）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" v-int placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="秒杀价格（元）">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" v-money placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="秒杀库存">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" v-int placeholder="请输入" clearable />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteHandle(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="bottom-handle-box">
      <el-button type="primary" @click="saveHandle">提交</el-button>
    </div>
    <AddProduct
      v-if="showAddProduct"
      @close="closeHandle"
      @confirm="confirmtHandle"
    />
  </div>
</template>

<script>
import Steps from './Steps.vue'
import AddProduct from './AddProduct.vue'
export default {
  name: 'SeckillDetail',
  components: {
    Steps,
    AddProduct
  },
  data() {
    return {
      form: {},
      loading: false,
      step: 1,
      stepList: [
        {
          title: '申请秒杀',
          status: 'success'
        },
        {
          title: '平台审核',
          status: 'process'
        },
        {
          title: '完成'
        }
      ],
      deadline: new Date('2024-09-24'),
      showAddProduct: false,
      productList: []
    }
  },
  computed: {
  },

  methods: {

    // 添加产品
    addHandle() {
      this.showAddProduct = true
    },

    // 删除产品
    deleteHandle(index) {
      this.productList.splice(index, 1)
    },

    // 关闭
    closeHandle() {
      this.showAddProduct = false
    },

    // 确认选择商品
    confirmtHandle(productList) {
      this.productList = this.productList.concat(productList)
      this.closeHandle()
    }

  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.detail-item{
  margin-top: 20px;
}
.product-detail{
  display: flex;
  justify-content: flex-start;
  text-align: left;
  .product-left{
    width: 160px;
    margin-right: 50px;
  }
  .product-middle{
    margin-right: 100px;
  }
}

.product-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.p1{
  line-height: 40px;
  color: $regular-text;
}
.p2{
  font-size: 26px;
  line-height: 40px;
  color: $main-text;
  font-weight: bolder;
}
</style>
